<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box7{
            color: aqua;
            font-size: 34px;
        }
    </style>
</head>
<body>
    
    <p class="box1">hello!!!!!!!!!!!!!!</p>
    <h3 class="box2">you?!!!!!?????</h3>
    <em class="box3">what??????</em>
    <caption>商品信息详情</caption>
    <p class="box4">飞流直下<strong>三千尺</strong></p>
    <p class="box5">疑是银河落九天</p>
    <div class="box6">蒹葭苍苍   白露为霜 <br>
        所谓伊人  在水一方</div>
        <!-- 可以有多个类名 -->
        <a href="#" class="lj box7 box8" data-index="123">这是一个链接</a>
        <img src="" alt="">
</body>

<script>
    const em1 = document.querySelector('.box4');
    console.log(em1.innerHTML); //获取
    em1.innerHTML = '大数据,<em>大智慧</em>,大未来';  //设置
    console.log(em1.innerText);
    em1.innerText = '飞流直下<strong>三千尺</strong>';
    console.log(em1.textContent);
    em1.textContent = '大数据,<em>大智慧</em>,大未来';
    console.log('-------------------------');
    const em2 = document.querySelector('.box6');
    console.log(em2.innerHTML);
    console.log(em2.innerText);
    console.log(em2.textContent); 
    console.log('========================================');
    const em3 = document.querySelector('.lj');
    console.log(em3.href);  //打印出 file:///C:/Users/1/.vscode/DOM2.html#
    /*设置内置属性值  
        1.element.setAttribute('属性'，'值');  
        2.element.属性 = '值';
      */
    em3.href = 'https://www.baidu.com'; //设置内置属性的值
    em3.textContent = '百度一下';
    em3.setAttribute('href','https://www.mi.com'); //设置内置属性的值
    console.log('----------------------------------------');
    /*设置自定义属性值
        1.element.dataset.属性 = '值', 这里的属性只取  data- 后的自定义属性名
        2.element.dataset['属性']
    */
    em3.setAttribute('data-index','456'); //设置自定义属性值
    console.log(em3.getAttribute('data-index'));  //获取自定义属性值
    em3.dataset.index = '789'; //设置
    console.log(em3.dataset.index); //获取自定义属性
    console.log(em3.dataset['index']); //获取自定义属性

    console.log('-------------------------------------------');
    
//内置属性和自定义属性均使用此方法移除
    em3.removeAttribute('href'); 
    console.log(em3.getAttribute('href'));
    
    em3.removeAttribute('data-index'); 
    console.log(em3.getAttribute('data-index'));
    console.log('================================');
    
    em3.style.color = 'red';
    //所有css中带 - 的属性在这里一律改成 ： 去掉 -首字母大写。 例 ： font-size>fontSize
    em3.style.fontSize = '34px';
    em3.className = 'lj box7';
    
    
    
    

    
    
    
    
    
    
    
    
    
    
    
</script>
</html>